"use client"
import React, { useEffect, useState } from 'react';
import './page.css';
import { request } from '@/lib/request';
import axios from 'axios';
import { Button, Modal,notification } from 'antd';
import { useRouter } from 'next/navigation'
import Image from 'next/image';


// 登录注册组件封装
const AddUserForm = ({ onAddUser,onRegUser }) => {
  // 登录存储
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // 注册存储
  const [username1, setUsername1] = useState('');
  const [password1, setPassword1] = useState('');

  // 登录
  const handleAddUser = () => {
    if (username.trim() && password.trim()) {
      onAddUser({ username, password });
    }
  };

  // 注册
  const [visible, setVisible] = useState(false);

  const handleRegUser = () => {
    setVisible(true);
  };

  const handleOk = () => {
    // 处理用户注册
    if (username1.trim() && password1.trim()){
      onRegUser({ username:username1, password:password1 });
      setUsername('');
      setPassword('');
    }
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };
  

  return (
    <>
    <div className="add-user-form">
      <input type="text" placeholder="输入你的用户名字" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="输入你的密码" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleAddUser}>登录</button>
      <button onClick={handleRegUser} style={{marginLeft: '10px'}}>注册</button>
      <Modal
        title="用户注册"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>
        <input type="text" placeholder="注册的用户名" value={username1} onChange={(e) => setUsername1(e.target.value)} />
      <input type="password" placeholder="注册的密码" value={password1} onChange={(e) => setPassword1(e.target.value)} style={{marginLeft: '10px'}}/>
        </p>
      </Modal>
    </div>
    </>
  );
};


// 主页面---------------------------------
export default function Home() {
  const [api, contextHolder] = notification.useNotification();
  const router = useRouter();


  const addUser = async (newUser) => {
    const response = await request.post('/api/user/login', newUser);
    if(response.data.status == 200){
      api["success"]({
        message: '提示',
        description:response.data.msg
      })
      router.push("/sharesPage/home")
    } else if(response.data.status == 500){
      api["error"]({
        message: '提示',
        description:response.data.msg
      })
    }
    console.log(response);
  };

  const regUser = async (regUser) => {
    const response = await request.post('/api/user/reg', regUser);
    if(response.data.status == 200){
      api["success"]({
        message: '提示',
        description:response.data.msg
      })
    } else if(response.data.status == 500){
      api["error"]({
        message: '提示',
        description:response.data.msg
      })
    }
    console.log(response);
  };

  return (
    <>
    {contextHolder}
    <div>
      <div className='titleTop'>
      <Image
      src="/gupiaologo.png"
      alt="Example"
      width={30}
      height={30}
    />
        股票系统
        </div>
      <AddUserForm onAddUser={addUser} onRegUser={regUser} />
    </div>
    </>
  );
}
